<template>
    <div class="flex jc-sb mt-10 w100p pr-10">
        <div class="w50p fg1 brs bg-fff pl-10 pt-5 pr-10 pb-5">
            <div class="flex aic jc-sb mt-10">
                <p class="fwb f70 ">Histroy Quotation</p>
                <el-select v-model="value" class="w20p" placeholder="Select">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <el-table :data="leftList" v-loading="loading" height="29.5vh" style="width: 100%">
                <el-table-column type="expand">
                    <template #default="props">
                        <div>
                            <el-table :data="props.row.item" border>
                                <el-table-column align="center" prop="Qty" label="Qty" />
                                <el-table-column v-show="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay" align="center" prop="purchaser.quotation_price" label="PRICE" />
                                <el-table-column v-show="powerList.inquiry&&powerList.inquiry.inquiry_profit.Isdisplay" align="center" prop="purchaser.profit_rate" label="Profit" />
                                <el-table-column v-show="powerList.inquiry&&powerList.inquiry.inquiry_cost.Isdisplay" align="center" prop="purchaser.purchase_price" label="COST" />
                                <el-table-column align="center" prop="purchaser.leadingtime" label="LEADING" />
                                <el-table-column align="center" prop="purchaser.product_condition" label="CONDITION" />
                            </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="inquiry_id" align="center" label="RFQ ID" min-width="140" />
                <el-table-column prop="country.name" align="center" label="CNTY" />
                <el-table-column prop="items_count" align="center" label="ITEMS" />
                <el-table-column prop="customer.Customer_type" align="center" label="SUPPLIER" min-width="100" />
                <el-table-column prop="state" align="center" label="STA" />
            </el-table>
        </div>
        <div class="w50p brs bg-fff pt-10 pl-10 pr-10 ml-10 f70">
            <p class="f70 mt-10">History clinch a deal valence</p>
            <el-table :data="rightList" v-loading="loadingRight" height="30.4vh" stripe style="width: 100%">
                <el-table-column prop="product.model" width="150" />
                <el-table-column v-show="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay" prop="price" />
                <el-table-column prop="leadingtime" />
                <el-table-column prop="product_condition" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import * as $axios from '../../../api/index'
import { useDemoStore } from '../../../pinia/index'
import usePower from "../../../hooks/usePower";
const store = useDemoStore()
const { powerList } = usePower()
console.log(powerList)

const props = defineProps({
    product_id: String,
    newLeading: Array
})

// 加载
const loading = ref(false)
const loadingRight = ref(false)

// 历史报价
const leftList = ref([])
const leftData = () => {
    loading.value = true
    const data = {
        token: store.token,
        product_id: props.product_id
    }
    $axios.$orderGet_inquiry_list_by_product(data).then(res => {
        loading.value = false
        leftList.value = res.data.data
        // console.log(res.data.data)
    })
}

// 历史订单
const rightList = ref([])
const rightData = () => {
    loadingRight.value = true
    const data = {
        token: store.token,
        product_id: props.product_id
    }
    $axios.$orderHistory_order(data).then(res => {
        loadingRight.value = false
        res.data.data.forEach(item => {
            item.leadingtime = item.leadingtime || 'NO',
                item.product_condition = item.product_condition || 'NO'
        })
        rightList.value = res.data.data
        // console.log(res.data.data)
    })
}

watch(props, () => {
    leftData(),
        rightData()
})
</script>

<style lang="less">
.brs {
    border-radius: 10px;
}

.f70 {
    color: #707070;
}
</style>
